<template>
  <div class="app-container">
    <div class="app-container">
      <el-row style="padding-left: 80px" justify="space-between">
        <el-steps :active="active" align-center>
          <el-step title="基本信息" style="width: 200px" />
          <el-step title="科目设置" style="width: 200px" />
          <el-step title="费用设置" style="width: 200px" />
          <el-step title="日程安排" style="width: 200px" />
        </el-steps>
      </el-row>

      <br />
      <el-card>
        <br />
        <br />
        <!-- 新建培训 -->
        <TrainListAdd
          v-if="active == 0"
          @xiaFN="xiaFN"
          @goBack="backFN"
          :id="id"
        />
        <!-- 科目设置 -->
        <TrainSet
          v-if="active == 1"
          :id="id"
          :projectId="projectId"
          @xiaFN="xiaFN"
          @goBack="backFN"
        />
        <!-- 费用设置 -->
        <TrainCost
          v-if="active == 2"
          :id="id"
          :projectId="projectId"
          @xiaFN="xiaFN"
          @goBack="backFN"
        />
        <!-- 日程安排 -->
        <TrainSchedule
          v-if="active == 3"
          :id="id"
          :projectId="projectId"
          @xiaFN="xiaFN"
          @goBack="backFN"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { getBaseProjectList } from "@/api/oam/basic";
import { getCurrentInstance } from "vue";
import TrainListAdd from "./TrainListAdd";
import TrainSet from "./TrainSet";
import TrainCost from "./TrainCost";
import TrainSchedule from "./TrainSchedule";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { dropDownList } = proxy.useDict("dropDownList");
const id = ref();
const active = ref(0);
const projectId = ref();

if (route.query.id) {
  id.value = route.query.id;
}

if (route.query.active) {
  active.value = route.query.active;
}

// 所属项目下拉框、
dropList();
function dropList() {
  getBaseProjectList().then((response) => {
    dropDownList.value = response.rows;
  });
}

// 下一步
function xiaFN(n, idx, val) {
  console.log(n);
  console.log(idx);
  console.log(val);
  active.value = n;
  id.value = idx;
  projectId.value = val;
}
</script>

<style scoped>
.tts1 {
  float: left;
  padding: 40px;
  text-align: center;
}
.tts2 {
  float: left;
  padding: 40px;
  text-align: center;
}
</style>
